<template>
	<view>
		<view class="charts-box">
		  <qiun-data-charts
		    type="line"
		    :opts="opts"
		    :chartData="temperatureData"
		    :ontouch="true"
		  />
			<qiun-data-charts
			  type="line"
			  :opts="opts"
			  :chartData="lightData"
			  :ontouch="true"
			/>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cabinId: {},
				host: {},
				value: 1,
				temperatureData: {},
				lightData: {},
				opts: {
				  color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				  padding: [15,10,0,15],
				  enableScroll: true,
				  update:true ,
				  duration:0 ,
				 animation:false,
				  legend: {},
				  xAxis: {
				    disableGrid: true,
				    scrollShow: true,
				    itemCount: 8
				  },
				  yAxis: {
				    gridType: "dash",
				    dashLength: 4,
					tofix: 2
				  },
				  extra: {
				    line: {
				      type: "straight",
				      width: 2,
				      activeType: "hollow"
				    }
				  }
				}
			}
		},
		mounted() {
			this.cabinId = getApp().globalData.cabinId;
			this.host = getApp().globalData.host;
			console.log(this.cabinId);
		  this.getServerData();// Fetch initial datay
			this.startAutoRefresh(); // Start the auto-refresh timer
			},
			beforeDestroy() {
			    this.stopAutoRefresh(); // Clear the timer when the component is destroyed
			},
		methods: {
			//下拉刷新
			onPullDownRefresh() {
			        console.log('refresh');
			        setTimeout(function () {
			            uni.stopPullDownRefresh();
			        }, 1000);
			    },
			
		  getServerData() {
		    // Replace 'YOUR_BACKEND_URL' with the actual URL of your Java backend API
		    this.getTemperature();
			this.getLight();
		  },
		  getTemperature() {
			  const backendURL1 = "http://"+this.host+":7777/getLineData/temperature/"+this.cabinId;
			  uni.request({
			    url: backendURL1,
			    method: "GET",
			    success: (res) => {
			      const data = res.data; // Assuming the response is in the same format as the local 'res' variable
			      this.temperatureData = JSON.parse(JSON.stringify(data));
			    },
			    fail: (err) => {
			      console.error("Error fetching data:", err);
			    }
			  });
		  },
		  getLight(){
			  const backendURL2 = "http://"+this.host+":7777/getLineData/light/"+this.cabinId;
			  uni.request({
			    url: backendURL2,
			    method: "GET",
			    success: (res) => {
			      const data = res.data; // Assuming the response is in the same format as the local 'res' variable
			      this.lightData = JSON.parse(JSON.stringify(data));
			    },
			    fail: (err) => {
			      console.error("Error fetching data:", err);
			    }
			  });
		  },
			startAutoRefresh() {
			  this.timerId = setInterval(() => {
				this.getServerData(); // Call the method every one second
			  }, 2000);
			},
			stopAutoRefresh() {
			  clearInterval(this.timerId); // Clear the timer when the component is destroyed
			}
			
		}
	}
</script>

<style scoped>
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .charts-box {
    width: 100%;
    height: 285px;
  }
</style>
